<template>
  <div class="shopping">
    <van-empty
      v-if="!isLogged"
      :image="require('../assets/undraw_Access_account_re_8spm.png')"
      description="登录后才能查看噢"
    >
      <van-button
        round
        type="danger"
        color="#ff6a6c"
        class="bottom-button"
        to="/login"
        >立即登录</van-button
      >
    </van-empty>
    <template v-else>
      <div class="item" v-for="(item, index) in cartList" :key="index">
        <van-checkbox
          v-model="item.checked"
          @change="toggleAll(index, $event)"
        ></van-checkbox>
        <img :src="item.picUrl" alt="" />
        <div class="info">
          <span>{{ item.goodsName }}</span>
          <span>{{item.specifications[0]}}</span>
          <span>{{ item.price | Price }}</span>
        </div>
        <div class="but">
          <span>×1</span>
          <van-button type="default" size="mini" @click="del([item.productId])"
            >删除</van-button
          >
        </div>
      </div>
      <van-submit-bar
        :price="price * 100"
        button-text="去结算"
        @submit="onSubmit"
      >
        <van-checkbox v-model="isCheckAll" @click="checkAll">全选</van-checkbox>
      </van-submit-bar>
    </template>
  </div>
</template>

<script>
import {
  SubmitBar,
  RadioGroup,
  Radio,
  Button,
  Checkbox,
  CheckboxGroup,
  Toast,
  Empty,
} from "vant";
import API from "@/utils/api.js";
export default {
  name: "Shopping",
  data() {
    return {
      checked: "",
      cartList: [],
      radio: "1",
      isCheckAll: false, // 是否全选
      result: [],
      price: 0,
      isLogged: this.$store.state.token ? true : false,
    };
  },
  created() {
    if (this.isLogged) {
      this.$get(API.GET_CART_INDEX, { token: this.$store.state.token }).then(
        (res) => {
          console.log(res);
          const array = res.data.cartList;
          array.forEach((item) => {
            item.checked = false;
          });
          this.cartList = array;
        }
      );
    }
  },
  methods: {
    onSubmit() {
      this.$router.push({
        path: "/order",
        query: {
          cartId: 0,
        },
      });
    },
    del([productId]) {
      this.$post(API.POST_CART_DELETE, {
        token: this.$store.state.token,
        productIds: [productId],
      }).then((res) => {
        let index = this.cartList.findIndex((item) => {
          if (item.productId == productId) {
            return true;
          }
        });
        this.cartList.splice(index, 1);
        Toast.success("已删除");
        console.log(res.data.cartList.id);
      });
    },
    checkAll() {
      let productIds = [];
      for (let index = 0; index < this.cartList.length; index++) {
        productIds.push.apply(productIds, [this.cartList[index].productId]);
      }
      this.$post(API.POST_CART_CHECKED, {
        token: this.$store.state.token,
        productIds,
        isChecked: this.isCheckAll ? true : false,
      }).then((res) => {
        this.cartList = res.data.cartList;
        if (
          res.data.cartTotal.checkedGoodsCount == res.data.cartTotal.goodsCount
        ) {
          this.isCheckAll = true;
        } else {
          this.isCheckAll = false;
        }
      });
    },
    toggleAll(e, event) {
      this.$post(API.POST_CART_CHECKED, {
        token: this.$store.state.token,
        productIds: [this.cartList[e].productId],
        isChecked: this.cartList[e].checked ? true : false,
      }).then((res) => {
        this.cartList = res.data.cartList;
        if (event == true) {
          this.price =
            this.price + this.cartList[e].price * this.cartList[e].number;
        } else if (event == false && this.cartList[e].price == 0) {
          this.price = 0;
        }
        if (event == false && this.cartList[e].price > 0) {
          this.price =
            this.price - this.cartList[e].price * this.cartList[e].number;
        }
        if (
          res.data.cartTotal.checkedGoodsCount == res.data.cartTotal.goodsCount
        ) {
          this.isCheckAll = true;
        } else {
          this.isCheckAll = false;
        }
      });
    },
  },
  components: {
    [SubmitBar.name]: SubmitBar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Toast.name]: Toast,
    [Empty.name]: Empty,
  },
  filters: {
    Price: (value) => {
      return "￥" + value + ".00";
    },
  },
};
</script>

<style lang="less" scoped>
.shopping {
  margin-top: 46px;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  background-color: #f4f4f4;
  color: #444;
  display: flex;
  flex-direction: column;
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .item {
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 120px;
      height: 120px;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      :nth-child(2) {
        margin: 12px 0;
      }
      :nth-child(3) {
        color: rgb(238, 74, 74);
      }
    }
    .but {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-top: 56px;
    }
  }
  .van-submit-bar__bar {
    position: fixed;
    bottom: 50px;
    width: 100%;
    padding: 0;
    background-color: white;
    display: flex;
    .van-checkbox {
      margin-left: 10px;
    }
    .van-button {
      margin-right: 10px;
    }
  }
}
</style>